import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { useEffect, useState } from 'react';

echarts.use([
  TooltipComponent,
  LegendComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);
interface OverviewProps {
  actual?: number[];
  payable?: number[];
}
const Overview = (props: OverviewProps) => {
  const { actual, payable } = props;
  const [box, setBox] = useState<HTMLElement | null>(null);
  useEffect(() => {
    const node = document.getElementById('overview');
    setBox(node);
  }, []);
  if (box !== null) {
    const options = {
      legend: {
        orient: 'horizontal',
        right: 10,
        top: 0,
        data: [
          {
            name: '应收',
            itemStyle: {
              borderColor: '#fff',
              color: '#26a3e2',
              borderWidth: 1,
            },
          },

          {
            name: '实收',
            itemStyle: {
              borderColor: '#fff',
              color: '#df9414',
              borderWidth: 1,
            },
          },
        ],
        icon: 'circle',
        textStyle: {
          color: '#fff',
        },
        itemWidth: 8,
      },
      grid: {
        left: 0,
        containLabel: true,
        bottom: 10,
        top: 22,
        right: 12,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        splitLine: {
          show: false,
        },
        axisLabel: {
          fontWeight: 'bolder',
          color: '#818181',
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#818181',
          },
        },
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#818181',
          },
        },
        scale: true,
        axisLabel: {
          fontWeight: 'bolder',
          color: '#818181',
        },
      },
      series: [
        {
          name: '应收',
          type: 'line',
          stack: 'Total',
          smooth: true,
          symbol: 'none',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#5cadd7',
              },
              {
                offset: 1,
                color: '#5762682c',
              },
            ]),
            opacity: 0.3,
          },
          // lineStyle: {
          //   width: 2,
          //   shadowColor: '#26a3e2',
          //   shadowBlur: 20,
          //   shadowOffsetY: 10,
          // },
          data: payable,
        },
        {
          name: '实收',
          type: 'line',
          stack: 'Total',
          smooth: true,
          symbol: 'none',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#c19444',
              },
              {
                offset: 1,
                color: '#7a6e562c',
              },
            ]),
            opacity: 0.3,
          },
          // lineStyle: {
          //   width: 2,
          //   shadowColor: '#df9414',
          //   shadowBlur: 20,
          //   shadowOffsetY: 10,
          // },
          data: actual,
        },
      ],
      color: ['#26a3e2', '#df9414'],
      tooltip: {
        trigger: 'axis',
      },
    };
    const myChart = echarts.init(box);
    myChart.resize({ height: 200 });
    myChart.setOption(options);
  }

  return <div id="overview" />;
};

export default Overview;
